<template>
  <div>
    <!-- :single="true" :selection="true" -->
    <table-view
      no-bottom
      :table-data="tableData"
      @sizeChange="sizeChange"
      @radioChange="selectionChange"
    >
      <div slot="searchCondition">
        <el-form
          class="yn_form"
          inline
          label-width="auto"
        >
          <el-form-item
            style="float: right"
            label-width="auto"
          >
            <el-input
              v-model="queryParams.roleName"
              class="yn_ipt"
              placeholder="岗位名称"
              :maxlength="20"
              clearable
            >
              <i
                id="suffix_search"
                slot="suffix"
                class="el-icon-search"
                @click="queryList()"
              />
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <template slot="table-column">
        <el-table-column
          prop="code"
          label="岗位编码"
          min-width="100"
        />
        <el-table-column
          prop="name"
          label="岗位名称"
          width="width"
        />
        <el-table-column
          prop="remark"
          label="岗位描述"
          width="width"
        />
        <el-table-column label="操作">
          <template slot-scope="{row}">
            <el-button
              type="text"
              @click="handleOk(row)"
            >
              选择
            </el-button>
          </template>
        </el-table-column>
      </template>
    </table-view>
    <template>
      <div style="text-align:center">
        <el-button
          key="submit"
          type="primary"
          @click="handleOk"
        >
          确定
        </el-button>
      </div>
    </template>
  </div>
</template>
<script>
import tableView from '@/components/table_view';
export default {
  components: {
    tableView
  },
  data() {
    return {
      tableData: {
        list: [],
        pageSize: 10,
        pageNum: 1,
        total: 0
      },
      pageSize: 10,
      pageNo: 1,
      selectRows: null,
      id:'',
      queryParams: {
        name: '',
        pageNo: 1,
        pageSize: 10
      }
    }
  },
  mounted(){
    this.getListData()
  },
  methods:{
    queryList(){
      this.pageNo = 1
      this.queryParams.name = ''
      this.getListData()
    },
    sizeChange(){
      this.pageNo = this.tableData.pageNum;
      this.pageSize = this.tableData.pageSize;
      this.getListData()
    },
    getListData(){
      this.COM.jsonsqlForSelect({
        'sys_position:data[]':{
          '@column':'*',
          '@where':{
            'status@eq':'1',
            'name@like':`%${this.queryParams.name}%`
          },
          '@page':{
            '@pageNo':this.pageNo,
            '@pageSize':10,
          }
        }
      }).then(res =>{
        this.tableData.list = res.data
        this.tableData.total = parseInt(res.total)
      })
    },
    selectionChange(data){
      this.selectRows = data
    },
    handleOk(row){
      this.$emit('selectData',row);
    },
  }
};
</script>
<style lang="less" scoped>
  .brdDashed {
    border: 1px dashed #888;
  }
  .brdCon {
    padding: 3px 7px;
    border-radius: 12px;
    font-size: 12px;
    color: #5875a4;
    background: #e4edf4;
  }
  .word_yu {
    margin-left: 5px;
    margin-right: 5px;
  }
  .brdConPass {
    padding: 3px 7px;
    border-radius: 2px;
    font-size: 12px;
    color: #5875a4;
    background: #e4edf4;
  }
  .brdConRed {
    padding: 3px 7px;
    border-radius: 2px;
    font-size: 12px;
    color: #c4616b;
    background: #f5e7e5;
  }
  /deep/.el-icon-circle-close {
    margin-right: 20px !important;
  }
</style>
